<template>
<div>
    <!--ref-->
    <p>年龄:{{age}}</p >
    <button @click="age++">增加年龄</button>
    <!---->
    <p>姓名:{{user.name}}</p >
    <input placeholder="请输入姓名" v-model="user.name"/>
    <!-- 城市--> 
    <p>城市:{{user.address.city}}</p >
    <input placeholder="请输入城市" v-model="city">
    <!--邮箱-->
    <p>邮箱:{{user.email}}</p >
    <input placeholder="请输入邮箱" v-model="email"> 
</div>
</template>
<script setup>

import { ref,reactive, toRef, toRefs} from 'vue';
const age=ref(25);
const user=reactive({
    name:"王五",
    address:{
        city:"锡林郭勒",
        country:"中国"
    },
    email:"zhangsan@example.com"
})
//toRef
const city=toRef(user.address,"city")
const { email }=toRefs(user);
//定时器
setTimeout(()=>{
  age.value++;
user.name = '李四';
city.value="上海";
email.value="lisi@example.com"
},2000)
</script>

<style scoped>


</style>